<template>
    <div class="pl-20px">
        <!-- <div class="mb-7px text-color-[#666] text-[12px]">提示：Ctrl+F 搜索关键字，Ctrl+S 保存，Ctrl+H 查找替换!</div> -->
        <div class="my-12px" style="border:1px solid #ccc;">
            <v-ace-editor v-model:value="content" lang="text" theme="chrome" style="height: 300px" />
        </div>
        <div class="">
            <el-button type="primary" size="small" :loading="loading" @click="saveHandle()">保存</el-button>
        </div>
        <div class="mt-15px text-color-#777 text-[12px]">* 此处为mysql主配置文件,若您不了解配置规则,请勿随意修改。</div>

    </div>
</template>
<script setup lang='ts'>
import { reactive, ref, onMounted } from "vue";
//https://blog.csdn.net/Roy__Jason/article/details/125804095
import ace from 'ace-builds';
// https://github.com/CarterLi/vue3-ace-editor
import { VAceEditor } from 'vue3-ace-editor';
import { ElMessage } from 'element-plus'
import { getAppMysqlGetConfigAPI, putAppMysqlSetConfigAPI } from '@/api/systemMonitor'
import { Base64 } from "js-base64"

ace.config.set('basePath', '/static/src-min-noconflict/');
const content = ref('');

// 提交按钮loading
const loading = ref(false)

onMounted(() => {
    getData();
})


//提交
const saveHandle = async () => {
    loading.value = true;
    putAppMysqlSetConfigAPI({
        config: content.value,
    }).then(() => {
        ElMessage.success("操作成功")
    }).finally(() => {
        loading.value = false;
    })
}

//获取详情数据
const getData = () => {
    getAppMysqlGetConfigAPI().then((res) => {
        content.value = Base64.decode(res.data);
    })
}

</script>
<style lang="less" scoped>

</style>